<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>时空云计算示范应用</title>

    <!-- Bootstrap Core CSS -->
    <link href="res/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- MetisMenu CSS -->
    <link href="res/metisMenu/metisMenu.min.css" rel="stylesheet">
    <!-- Custom CSS -->
    <link href="res/dist/css/sb-admin-2.css" rel="stylesheet">
    <!-- Morris Charts CSS -->
    <link href="res/morrisjs/morris.css" rel="stylesheet">
    <!-- Custom Fonts -->
    <link href="res/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <!-- Mapbox GL -->
    <link rel="stylesheet" href="res/mapbox-gl/mapbox-gl.css">
    <!-- Bootstrap-Table -->
    <link rel="stylesheet" href="res/bootstrap-table/bootstrap-table.css">
    <!-- Map Css -->
    <link rel="stylesheet" href="css/map.css">
</head>

<body>

    <div id="wrapper">
        <!-- 导航 -->
        <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0;background-color:#F1F100;">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="index.html" style="color: #000000">时空云计算示范应用</a>
            </div>

            <ul class="nav navbar-top-links navbar-right">
                <li class="dropdown">
                    <button type="button" class="btn btn-primary" style="margin-right:2px;margin-top:8px" id="clearAll">清除</button>
                </li>
            </ul>

            <div class="navbar-default sidebar" role="navigation">
                <div class="sidebar-nav navbar-collapse">
                    <ul class="nav" id="side-menu">
                        <li class="sidebar-search">
                            <div class="input-group custom-search-form">
                                <input type="text" class="form-control" placeholder="搜索...">
                                <span class="input-group-btn">
                                <button class="btn btn-default" type="button">
                                    <i class="fa fa-search"></i>
                                </button>
                            </span>
                            </div>
                            <!-- /input-group -->
                        </li>
                        <!--<li>-->
                            <!--<a href="#" id="visualization"><i class="fa fa-dashboard fa-fw"></i> 海量渲染</a>-->
                        <!--</li>-->
                        <li>
                            <a href="nyctaxi/index.html"><i class="fa fa-bar-chart-o fa-fw"></i> 数据管理<span class="fa arrow"></span></a>
                            <ul class="nav nav-second-level">
                                <li>
                                    <a href="#">OSM预处理</a>
                                </li>
                                <!--<li>-->
                                    <!--<a href="morris.html">Morris.js Charts</a>-->
                                <!--</li>-->
                            </ul>
                            <!-- /.nav-second-level -->
                        </li>
                        <li>
                            <a href="#"><i class="fa fa-table fa-fw"></i> 位置服务<span class="fa arrow"></span></a>
                            <ul class="nav nav-second-level">
                                <li>
                                    <a href="#" id="uadbAnlysis">地址匹配</a>
                                </li>
                                <li>
                                    <a href="#" id="heatmap">热力显示</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="#"><i class="fa fa-edit fa-fw"></i> 网络轨迹<span class="fa arrow"></span></a>
                            <ul class="nav nav-second-level">
                                <li>
                                    <a href="pages/nyctaxi/index.html">实时轨迹</a>
                                </li>
                                <li>
                                    <a href="#" id="routeCount">轨迹统计</a>
                                </li>
                                <li>
                                    <a href="#">路径分析</a>
                                </li>
                            </ul>
                        </li>
                        <!--<li>-->
                            <!--<a href="#"><i class="fa fa-wrench fa-fw"></i> UI Elements<span class="fa arrow"></span></a>-->
                            <!--<ul class="nav nav-second-level">-->
                                <!--<li>-->
                                    <!--<a href="panels-wells.html">Panels and Wells</a>-->
                                <!--</li>-->
                                <!--<li>-->
                                    <!--<a href="buttons.html">Buttons</a>-->
                                <!--</li>-->
                                <!--<li>-->
                                    <!--<a href="notifications.html">Notifications</a>-->
                                <!--</li>-->
                                <!--<li>-->
                                    <!--<a href="typography.html">Typography</a>-->
                                <!--</li>-->
                                <!--<li>-->
                                    <!--<a href="icons.html"> Icons</a>-->
                                <!--</li>-->
                                <!--<li>-->
                                    <!--<a href="grid.html">Grid</a>-->
                                <!--</li>-->
                            <!--</ul>-->
                            <!--&lt;!&ndash; /.nav-second-level &ndash;&gt;-->
                        <!--</li>-->
                        <!--<li>-->
                            <!--<a href="#"><i class="fa fa-sitemap fa-fw"></i> Multi-Level Dropdown<span class="fa arrow"></span></a>-->
                            <!--<ul class="nav nav-second-level">-->
                                <!--<li>-->
                                    <!--<a href="#">Second Level Item</a>-->
                                <!--</li>-->
                                <!--<li>-->
                                    <!--<a href="#">Second Level Item</a>-->
                                <!--</li>-->
                                <!--<li>-->
                                    <!--<a href="#">Third Level <span class="fa arrow"></span></a>-->
                                    <!--<ul class="nav nav-third-level">-->
                                        <!--<li>-->
                                            <!--<a href="#">Third Level Item</a>-->
                                        <!--</li>-->
                                        <!--<li>-->
                                            <!--<a href="#">Third Level Item</a>-->
                                        <!--</li>-->
                                        <!--<li>-->
                                            <!--<a href="#">Third Level Item</a>-->
                                        <!--</li>-->
                                        <!--<li>-->
                                            <!--<a href="#">Third Level Item</a>-->
                                        <!--</li>-->
                                    <!--</ul>-->
                                    <!--&lt;!&ndash; /.nav-third-level &ndash;&gt;-->
                                <!--</li>-->
                            <!--</ul>-->
                            <!--&lt;!&ndash; /.nav-second-level &ndash;&gt;-->
                        <!--</li>-->
                        <!--<li>-->
                            <!--<a href="#"><i class="fa fa-files-o fa-fw"></i> Sample Pages<span class="fa arrow"></span></a>-->
                            <!--<ul class="nav nav-second-level">-->
                                <!--<li>-->
                                    <!--<a href="blank.html">Blank Page</a>-->
                                <!--</li>-->
                                <!--<li>-->
                                    <!--<a href="login.html">Login Page</a>-->
                                <!--</li>-->
                            <!--</ul>-->
                            <!--&lt;!&ndash; /.nav-second-level &ndash;&gt;-->
                        <!--</li>-->
                    </ul>
                </div>
                <!-- /.sidebar-collapse -->
            </div>
            <!-- /.navbar-static-side -->
        </nav>

        <!--主界面-->
        <div id="page-wrapper">
            <div style="height: 684px;" id="mapDiv"></div>
        </div>
    </div>

    <!--地址匹配-->
    <div class="modal fade " id="uadbModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document" style="width: 1400px">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">地址匹配
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                        </button>
                    </h4>
                </div>
                <div class="modal-body">
                    <p>待匹配数据和基底数据进行地址匹配</p>
                    <button type="button" class="btn btn-default"  id="startUadbAnlysis">
                        <span class="glyphicon glyphicon-play" aria-hidden="true"></span>开始地址匹配
                    </button>
                    <button type="button" class="btn btn-primary"  disabled="disabled"  id="checkUadbAnlysis">
                        <span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>查看匹配结果
                    </button>
                </div>
                <div class="modal-footer">
                    <table id="uadbtable"></table>
                </div>
            </div>
        </div>
    </div>

    <!--轨迹统计-->
    <div class="modal fade " id="routeCountModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document" style="width: 800px">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">轨迹统计
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                        </button>
                    </h4>
                </div>
                <div class="modal-body">
                    <p>使用纽约市出租车数据，统计其特定的空间范围和时间范围内的乘客人数大于3和行驶里程大于10公里的数据</p>
                    <button type="button" class="btn btn-default"  id="startRouteCount">
                        <span class="glyphicon glyphicon-play" aria-hidden="true"></span>开始轨迹统计
                    </button>
                    <button type="button" class="btn btn-primary"    id="checkRouteCount">
                        <span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>查看统计结果
                    </button>
                </div>
                <div class="modal-footer">
                    <table id="routeCountTable"></table>
                </div>
            </div>
        </div>
    </div>

    <!-- jQuery -->
    <script src="res/jquery/jquery.min.js"></script>
    <!-- Bootstrap Core JavaScript -->
    <script src="res/bootstrap/js/bootstrap.min.js"></script>
    <!-- Metis Menu Plugin JavaScript -->
    <script src="res/metisMenu/metisMenu.min.js"></script>
    <!-- Morris Charts JavaScript -->
    <script src="res/raphael/raphael.min.js"></script>
    <script src="res/morrisjs/morris.min.js"></script>
    <!-- Custom Theme JavaScript -->
    <script src="res/dist/js/sb-admin-2.js"></script>
    <!-- Mapbox Gl JavaScript -->
    <script src="res/mapbox-gl/mapbox-gl.js"></script>
    <script src="res/mapbox-gl/mapbox-gl-language.js"></script>
    <!-- Bootstrap-table JavaScript -->
    <script src="res/bootstrap-table/bootstrap-table.js"></script>
    <script src="res/bootstrap-table/bootstrap-table-zh-CN.js"></script>
    <!--自定义js-->
    <script src="js/map.js"></script>
</body>
</html>
